<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script  type="module">
		/*
				将js环境下的信息传递到fragment像素shader内部使用，
				主要用到了fragment像素shader的uniform属性进行声明  

				注意：如果给fragment传递数据需要颜色的时候需要声明渲染精度，precision mediump float; 该代码描述了像素渲染精度是中等的，当然也有高等的hight 和低等的。

				varying 是从vertex环境传到fragment内部使用一个限定声明符使用方式见（webgl5.html）
		*/ 
		import initShader from "./js/createShader.js"
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl")   

		let vertexShader=`
			//创建一个从外部接收的位置信息
			attribute vec2 a_position;
			uniform float u_size;
			void main(){
				gl_Position=vec4(a_position,0.0,1.0);
				gl_PointSize=u_size;
			}
		`;
		let fragementShader=`
			//接受js环境的变量值
			precision mediump float;
			uniform vec3 u_color;
			void main(){
				gl_FragColor=vec4(u_color,1.0);
			} 
		`;   

		//初始化变量
		initShader(gl,vertexShader,fragementShader);

		//定义清空后的颜色值	
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 	  

		let x=0,y=0,n=1000,r=0.3;

	    for(let i=0;i<n;i++){
	    	//获取shader内部变量
	    	//圆
	    	x=Math.sin(i)*r; 
	    	y=Math.cos(i)*r;   
	    	//获取路径
		   let a_position=gl.getAttribLocation(gl.program,'a_position');
		   //获取大小
		   let u_size=gl.getUniformLocation(gl.program,'u_size');
		   console.log(u_size);
		   let u_color=gl.getUniformLocation(gl.program,'u_color');
			gl.vertexAttrib2f(a_position,x,y);  
			gl.uniform1f(u_size,5);    

		    gl.uniform3f(u_color,1.1,1.0,0.0);

		    gl.drawArrays(gl.POINTS,0,1); 
	    }  

	</script>
</html>